<!-- 右侧中间 -->
<template>
  <div class="rightmiddle">
    <dv-border-box-12>
      <div id="rightmiddle-box" class="pd10">
        <span id="span-title">源-源头排查</span>
        <div class="top">
          <span class="spantext"
            >立管点总数
            <span class="spannum">{{ title.list.lgdCnt }}个</span></span
          >
          <span class="spantext" style="margin-right: 0"
            >工业废水
            <span class="spannum">{{ title.list.gyfsCnt }}个</span></span
          >
        </div>
        <!-- 统计图 -->
        <div class="charts">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
            style="height: 200px"
          >
            <el-tab-pane label="面源总数" name="first">
              <div id="facechart"></div>
              <div class="dianbox">
                <div class="dian" @click="mydian1" tabindex="1"></div>
                <div class="dian" @click="mydian2" tabindex="2"></div>
                <div class="dian" @click="mydian3" tabindex="3"></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="点源总数" name="second">
              <div id="pointchart"></div>
              <div class="dianbox">
                <div class="dian" @click="dydian1" tabindex="4"></div>
                <div class="dian" @click="dydian2" tabindex="5"></div>
                <div class="dian" @click="dydian3" tabindex="6"></div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </dv-border-box-12>
  </div>
</template>
  
<script setup>
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import * as echarts from "echarts";
import { sourceStatistics } from "@/api/home/index";
var internalInstance = getCurrentInstance();
let title = reactive({ list: "" });
//  面源echarts图数据
let myarr = reactive([]);
let myarrOne = reactive([]);
let myarrTwo = reactive([]);
let myarrThree = reactive([]);
// 面源echarts图x轴文字数据
let mylist = reactive([
  { name: "生活类", value: 0 },
  { name: "农业类", value: 0 },
  { name: "工业类", value: 0 },
]);
let mylistOne = reactive([
  { name: "餐饮", value: 0 },
  { name: "汽修", value: 0 },
  { name: "农贸", value: 0 },
  { name: "其他", value: 0 },
]);
let mylistTwo = reactive([
  { name: "畜牧", value: 0 },
  { name: "水产", value: 0 },
  { name: "养殖", value: 0 },
  { name: "其他", value: 0 },
]);
let mylistThree = reactive([
  { name: "化工", value: 0 },
  { name: "纺织", value: 0 },
  { name: "加工", value: 0 },
  { name: "其他", value: 0 },
]);
// 初始化数据
let mytitleinitia = mylist.map((v) => v.name);
// 第一个小点文字数据
let mytitleOne = mylistOne.map((v) => v.name);
// 第二个小点文字数据
let mytitleTwo = mylistTwo.map((v) => v.name);
// 第三个小点文字数据
let mytitleThree = mylistThree.map((v) => v.name);
// ------------------end--------------------------
// 点源echarts图数据
let dyarr = reactive([]);
let dyarrOne = reactive([]);
let dyarrTwo = reactive([]);
let dyarrThree = reactive([]);
// 点源echarts图x轴文字数据
let dylist = reactive([
  { name: "雨水类", value: 0 },
  { name: "污水类", value: 0 },
  { name: "河流类", value: 0 },
]);
let dylistOne = reactive([
  { name: "进水口", value: 0 },
  { name: "出户", value: 0 },
  { name: "立管", value: 0 },
  { name: "雨箅", value: 0 },
]);
let dylistTwo = reactive([
  { name: "立管", value: 0 },
  { name: "污箅", value: 0 },
  { name: "进水口", value: 0 },
  { name: "出户", value: 0 },
  { name: "化粪池", value: 0 },
  { name: "隔油池", value: 0 },
  { name: "垃圾池", value: 0 },
  { name: "工业废水", value: 0 },
]);
let dylistThree = reactive([
  { name: "立管", value: 0 },
  { name: "篦子", value: 0 },
  { name: "进水口", value: 0 },
  { name: "出户", value: 0 },
]);
// 初始化数据
let dytitleinitia = dylist.map((v) => v.name);
// 第一个小点文字数据
let dytitleOne = dylistOne.map((v) => v.name);
// 第二个小点文字数据
let dytitleTwo = dylistTwo.map((v) => v.name);
// 第三个小点文字数据
let dytitleThree = dylistThree.map((v) => v.name);
// ---------------end------------------------
onMounted(() => {
  sourceStatistics().then((res) => {
    console.log(res.data, "源头排查请求数据");
    title.list = res.data;
    // 面源初始化数据
    myarr[0] = res.data.myChildren.shlqtCnt;
    myarr[1] = res.data.myChildren.nylqtCnt;
    myarr[2] = res.data.myChildren.gylqtCnt;
    // 面源第一个小点点击数据;
    myarrOne[0] = res.data.myChildren.cyCnt;
    myarrOne[1] = res.data.myChildren.qxCnt;
    myarrOne[2] = res.data.myChildren.nmCnt;
    // 面源第二个小点点击数据
    myarrTwo[0] = res.data.myChildren.xmCnt;
    myarrTwo[1] = res.data.myChildren.yzCnt;
    myarrTwo[2] = res.data.myChildren.scCnt;
    // 面源第三个小点点击数据
    myarrThree[0] = res.data.myChildren.hgCnt;
    myarrThree[1] = res.data.myChildren.fzCnt;
    myarrThree[2] = res.data.myChildren.jgCnt;
    //  点源初始数据
    dyarr[0] = res.data.dyChildren.yslgCnt;
    dyarr[1] = res.data.dyChildren.wslgCnt;
    dyarr[2] = res.data.dyChildren.hllgCnt;
    //  点源第一个小点点击数据
    dyarrOne[0] = res.data.dyChildren.yslgCnt;
    dyarrOne[1] = res.data.dyChildren.ysjskCnt;
    dyarrOne[2] = res.data.dyChildren.yschCnt;
    dyarrOne[3] = res.data.dyChildren.ysybCnt;
    // // 点源第二个小点点击数据
    dyarrTwo[0] = res.data.dyChildren.wslgCnt;
    dyarrTwo[1] = res.data.dyChildren.wswbCnt;
    dyarrTwo[2] = res.data.dyChildren.wsjskCnt;
    dyarrTwo[3] = res.data.dyChildren.wschCnt;
    dyarrTwo[4] = res.data.dyChildren.hfcCnt;
    dyarrTwo[5] = res.data.dyChildren.gycCnt;
    dyarrTwo[6] = res.data.dyChildren.ljcCnt;
    dyarrTwo[7] = res.data.dyChildren.wsgyfsCnt;
    // // 点源第三个小点点击数据
    dyarrThree[0] = res.data.dyChildren.hllgCnt;
    dyarrThree[1] = res.data.dyChildren.hlbzCnt;
    dyarrThree[2] = res.data.dyChildren.hljskCnt;
    // 更新图表
    mychart.setOption(option);
    mychart2.setOption(option2);
  });
  myfun();
  dyfun();
});
// 面源echarts图
var mychart;
var option;
function myfun() {
  if (mychart != null && mychart != "" && mychart != undefined) {
    mychart.dispose(); //销毁
  }
  mychart = echarts.init(document.querySelector("#facechart"));
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "5%",
      bottom: "30%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: mytitleinitia,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    series: [
      {
        type: "bar",
        barCatgoryGap: 50,

        barWidth: 30, //柱子宽度
        barGap: 1, //柱子间距

        data: myarr,
      },
    ],
  };
  mychart.setOption(option);
}
// 点源echarts图
var mychart2;
var option2;
function dyfun() {
  mychart2 = echarts.init(document.querySelector("#pointchart"));
  //   ------------------------点源总数----------------------
  option2 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "5%",
      bottom: "30%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: dytitleinitia,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          show: true, // 是否显示刻度标签，默认显示
          interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
          //rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
          inside: false, // 刻度标签是否朝内，默认朝外
          color: "#fff",
          fontSize: 10,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#fff",
        },
      },
    ],
    series: [
      {
        type: "bar",
        barCatgoryGap: 50,
        barWidth: 20, //柱子宽度
        barGap: 2, //柱子间距
        data: dyarr,
      },
    ],
  };
  mychart2.setOption(option2);
}
// 面源点击事件
// 点击第一个小点
function mydian1() {
  myarr.length = 0;
  myarr = myarrOne;
  mytitleinitia.length = 0;
  mytitleinitia = mytitleOne;
  internalInstance.ctx.$forceUpdate();

  myfun();
}
// 点击第二个小点
function mydian2() {
  myarr.length = 0;
  myarr = myarrTwo;
  mytitleinitia.length = 0;
  mytitleinitia = mytitleTwo;
  internalInstance.ctx.$forceUpdate();
  myfun();
}
// 点击第二个小点
function mydian3() {
  myarr.length = 0;
  myarr = myarrThree;
  mytitleinitia.length = 0;
  mytitleinitia = mytitleThree;
  internalInstance.ctx.$forceUpdate();
  myfun();
}
// 点源点击事件
// 点击第一个小点
function dydian1() {
  dyarr.length = 0;
  dyarr = dyarrOne;
  dytitleinitia.length = 0;
  dytitleinitia = dytitleOne;
  internalInstance.ctx.$forceUpdate();
  dyfun();
}
// 点击第二个小点
function dydian2() {
  dyarr.length = 0;
  dyarr = dyarrTwo;
  dytitleinitia.length = 0;
  dytitleinitia = dytitleTwo;
  internalInstance.ctx.$forceUpdate();
  dyfun();
}
// 点击第二个小点
function dydian3() {
  dyarr.length = 0;
  dyarr = dyarrThree;
  dytitleinitia.length = 0;
  dytitleinitia = dytitleThree;
  internalInstance.ctx.$forceUpdate();
  dyfun();
}
const activeName = ref("first");
// const handleClick = (tab, event) => {
//   console.log(tab, event);
// };
</script>
  
<style scoped>
:deep(.el-tabs__item) {
  color: white !important;
}

.dian:focus {
  background-color: rgb(18, 133, 87);
}

:deep(.el-tabs__item) {
  color: #fff !important;
}

.rightmiddle {
  width: 100%;
  height: 350px;
  /* width: 85%;
  height:33%; */
  /* background-color: #14181e; */
  box-sizing: border-box;
  border-radius: 6%;
  display: flex;
  position: relative;
}

.top {
  width: 100%;
  height: 50px;
  /* background-color: yellowgreen; */
  line-height: 50px;
  font-size: 15px;
  margin-left: 3px;
}

#rightmiddle-box {
  height: 95%;
  width: 95%;
  background: rgba(4, 14, 17, 0.7);
  border-radius: 2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.demo-tabs {
  margin-left: 2px;
}

.spannum {
  color: white;
}

.spantext {
  color: #39ddcd;
  margin-right: 30px;
}

#facechart {
  width: 100%;
  height: 200px;
  /* background-color: yellowgreen; */
}

#pointchart {
  width: 285px;
  height: 200px;
  /* background-color: yellowgreen; */
}

/* 圆点样式 */
.dianbox {
  width: 110px;
  height: 30px;
  /* background-color: yellowgreen; */
  display: flex;
  justify-content: space-around;
  /* margin: 0 auto;
  margin-top: -60px; */
  position: absolute;
  bottom: 16px;
  left: 30%;
}

.dian {
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  margin: auto;
}
</style>